<template>
  <TSelectTable
    :columns="tableColumns"
    :request="requestFn"
    :params="tableParams"
    row-key="id"
  >
    <template #unit_form_item>
      <el-form-item label="单位" style="width: 25%">
        <el-input v-model="tableParams.unit" placeholder="请输入单位"></el-input>
      </el-form-item>
    </template>
    <template #unit_table_column_content="scope">
      {{ scope.text }}
    </template>
    <template #action_table_column_content="{ row }">
      <el-button
        type="primary"
        link
      >
        按钮 {{ row.id }}
      </el-button>
    </template>
  </TSelectTable>
</template>

<script lang="ts" setup>
import { TSelectTable, TSelectTableColumn } from '@twa/components'
import { ref } from 'vue'
function getDate(params) {
  console.log('最终传递的参数', params)
  return new Promise((resolve) => {
    let resultList = [
      { id: '1', skuDesc: '描述1', price: '200', unit: '1', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '2', skuDesc: '描述2', price: '212', unit: '2', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '3', skuDesc: '描述3', price: '300', unit: '3', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '4', skuDesc: '描述4',price: '1', unit: '4', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '5', skuDesc: '描述5',price: '12345', unit: '2', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '6', skuDesc: '描述6',price: '3321', unit: '1', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '7', skuDesc: '描述7',price: '1233', unit: '3', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '8', skuDesc: '描述8',price: '121', unit: '2', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '9', skuDesc: '描述9',price: '32', unit: '1', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '10', skuDesc: '描述10',price: '12', unit: '2', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '11', skuDesc: '描述11',price: '1', unit: '3', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
      { id: '12', skuDesc: '描述12',price: '0', unit: '4', name: '商品1', brandId: '1', categoryId: '2', createTime: '2024-01-01' },
    ]
    // 模拟接口请求返回数据
    setTimeout(() => {
      resolve(
        {
          list: resultList.splice((params.pageNo-1) * params.pageSize, (params.pageSize * params.pageNo)),
          total: 12
        }
      )
    }, 1000);
  })
}

const requestFnWrapper = (fn) => {
  return async (params) => {
    const { list, total } = await fn(params)
    return {
      data: list,
      total: Number(total),
    }
  }
}
const requestFn = requestFnWrapper(getDate)

const tableParams = ref({
  unit: ''
})
const tableColumns = ref<TSelectTableColumn[]>([
  {
    label: '商品名称',
    prop: 'name',
  },
  {
    label: '参考价格',
    hideInSearch: true,
    prop: 'price',
    renderText: ({row}) => {
      return row.price + '元'
    }
  },
  {
    label: '商品规格',
    prop: 'skuDesc',
  },
  {
    label: '品牌',
    prop: 'brandId',
    valueType: 'select',
    valueEnum: [
      { label: '件', value: '1' },
      { label: '个', value: '2' },
      { label: '包', value: '3' },
      { label: '把', value: '4' },
    ]
  },
  {
    label: '品类',
    prop: 'categoryId',
    valueType: 'select',
    valueEnum: [
      { label: '件', value: '1' },
      { label: '个', value: '2' },
      { label: '包', value: '3' },
      { label: '把', value: '4' },
    ]
  },
  {
    label: '单位',
    prop: 'unit',
    valueType: 'select',
    valueEnum: [
      { label: '件', value: '1' },
      { label: '个', value: '2' },
      { label: '包', value: '3' },
      { label: '把', value: '4' },
    ]
  },
  { 
    label: '创建时间',
    prop: 'createTime',
    paramsRange: ['startCreateTime', 'endCreateTime'],
    valueType: 'dateTimeRange',
  },
  {
    label: '操作',
    prop: 'action',
    hideInSearch: true,
  },
])
</script>